<!-- 个人中心 -->
<template>
	<view :class="{pageBgi:flag_big}" class="personal-wrap">
		<!-- 个人信息卡片 -->
		<userinfo-card v-if="userHeadData && userHeadData.style" :scrollTop="scrollTop" :detail="userHeadData" @onShare="onShare"></userinfo-card>
		<!-- 自定义模块 -->
		<template v-if="!flag_big">
			<view v-for="(item, index) in userTemplate" :key="item.id">
				<!-- 轮播 -->
				<sh-banner
					v-if="item.type === 'banner' && index !== 0"
					:Px="item.content.x"
					:Py="item.content.y"
					:borderRadius="item.content.radius"
					:height="item.content.height"
					:list="item.content.list"
				></sh-banner>
				<!-- 滑动宫格 -->
				<sh-grid-swiper v-if="item.type === 'menu'" :list="item.content.list" :oneRowNum="item.content.style"></sh-grid-swiper>
				<!-- 广告魔方 -->
				<sh-adv v-if="item.type === 'adv'" :detail="item.content"></sh-adv>
				<!-- 推荐商品 -->
				<sh-hot-goods v-if="item.type === 'goods-list' || item.type === 'goods-group'" :detail="item.content"></sh-hot-goods>
				<!-- 富文本 -->
				<sh-richtext v-if="item.type === 'rich-text'" :richId="item.content.id"></sh-richtext>
				<!-- 功能列表 -->
				<sh-cell v-if="item.type === 'nav-list'" :list="item.content.list"></sh-cell>
				<!-- 九宫格列表 -->
				<sh-grid v-if="item.type === 'grid-list'" :list="item.content.list"></sh-grid>
				<!-- 钱包 -->
				<sh-wallet v-if="item.type === 'wallet-card'"></sh-wallet>
				<!-- 订单卡片 -->
				<sh-order-card v-if="item.type === 'order-card'"></sh-order-card>
			</view>
			
		</template>
		
		<view v-if="flag_big" class="card-BIG-box">
			<view class="title-BIG-box">
				<text class="title-BIG">我的订单</text>
				<view @click="jump('/pages/order/list', { type: 'all' })" class="title-BIG-iconBox">全部<uni-icons style="margin-left: 10px;" type="forward" size="12"></uni-icons></view>
			</view>
			<view @click="orderFun(it,index)"  class="cell-item-row" v-for="(it,index) in BIGdrderList" :key="index">
				
				<view class="cell-item-row-l">
					<image :src="it.src" mode=""></image>
					<text>{{it.title}}</text>
				</view>
				<uni-icons type="forward" size="12"></uni-icons>
			</view>
		</view>
		
		<view v-if="flag_big" class="card-BIG-box">
			<view class="title-BIG-box">
				<text class="title-BIG">常用功能</text>
				<view class="title-BIG-iconBox"><uni-icons style="margin-left: 10px;" type="forward" size="12"></uni-icons></view>
			</view>
			<view class="BIG-gnBox">
				<view class="cell-gnBox" @click="toYuE">
					<image :src="$IMG_URL+'/static/images/BIG-my/myMoney.png'" mode=""></image>
					<text>我的余额</text>
				</view>
				<view class="cell-gnBox" @click="toPoint">
					<image :src="$IMG_URL+'/static/images/BIG-my/myPoint.png'" mode=""></image>
					<text>我的积分</text>
				</view>
				<view class="cell-gnBox" @click="toYhq">
					<image :src="$IMG_URL+'/static/images/BIG-my/myYhq.png'" mode=""></image>
					<text>优惠券</text>
				</view>
				<view class="cell-gnBox" @click="toMyPJ">
					<image :src="$IMG_URL+'/static/images/BIG-my/myTalk.png'" mode=""></image>
					<text>我的评价</text>
				</view>
				<view class="cell-gnBox" @click="myShare">
					<image :src="$IMG_URL+'/static/images/BIG-my/myPricture.png'" mode=""></image>
					<text>我的海报</text>
				</view>
				<view class="cell-gnBox" @click="toCenterYHQ">
					<image :src="$IMG_URL+'/static/images/BIG-my/yhqCenter.png'" mode=""></image>
					<text>领券中心</text>
				</view>
				<view class="cell-gnBox" @click="toAddress">
					<image :src="$IMG_URL+'/static/images/BIG-my/myAddress.png'" mode=""></image>
					<text>地址管理</text>
				</view>
				<view class="cell-gnBox" @click="toSign">
					<image :src="$IMG_URL+'/static/images/BIG-my/myQD.png'" mode=""></image>
					<text>我的签到</text>
				</view>
				<view class="cell-gnBox" @click="toHomePhone">
					<image :src="$IMG_URL+'/static/images/BIG-my/homePhone.png'" mode=""></image>
					<text>家属手机</text>
				</view>
				<!-- <view class="cell-gnBox" @click="toShenqing">
					<image :src="$IMG_URL+'/static/images/BIG-my/YXcenter.png'" mode=""></image>
					<text>分销申请</text>
				</view>
				<view class="cell-gnBox" @click="toMyTeam">
					<image :src="$IMG_URL+'/static/images/BIG-my/myTeam.png'" mode=""></image>
					<text>我的团队</text>
				</view> -->
				<view class="cell-gnBox" @click="toMymessage">
					<image :src="$IMG_URL+'/static/images/BIG-my/myMessage.png'" mode=""></image>
					<text>我的消息</text>
				</view>
				<view class="cell-gnBox" @click="toNews">
					<image :src="$IMG_URL+'/assets/addons/shopro/img/user/article.png'" mode=""></image>
					<text>新闻</text>
				</view>
				<view class="cell-gnBox" @click="toText">
					<image :src="$IMG_URL+'/assets/addons/shopro/img/user/news.png'" mode=""></image>
					<text>文章</text>
				</view>
				<view class="cell-gnBox">
					<!-- <image :src="$IMG_URL+'/static/images/BIG-my/myMessage.png'" mode=""></image>
					<text>文章</text> -->
				</view>
			</view>
		</view>
		 

		<!-- #ifdef H5 -->
		<view class="tabbar-hack" style="height: 120rpx; width:100%;"></view>
		<!-- #endif -->
		<!-- 关注弹窗 -->
		<!-- 悬浮按钮 -->
		<shopro-float-btn></shopro-float-btn>
		<!-- 登录提示 -->
		<shopro-auth-modal></shopro-auth-modal>
		<!-- 分享组件 -->
		<shopro-share v-model="showShare" posterType="user"></shopro-share>
		<!-- <shopro-tabbar></shopro-tabbar> -->
	</view>
</template>

<script>
import shBanner from './components/sh-banner.vue';
import shGridSwiper from './components/sh-grid-swiper.vue';
import shAdv from './components/sh-adv.vue';
import shRichtext from './components/sh-richtext.vue';
import shCell from './components/sh-cell.vue';
import shGrid from './components/sh-grid.vue';
import shOrderCard from './components/sh-order-card.vue';
import shWallet from './components/sh-wallet.vue';
import shHotGoods from './components/sh-hot-goods.vue';

import userinfoCard from './user/userinfo-card.vue';

import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';

import share from '@/shopro/share';

export default {
	components: {
		shBanner,
		shGridSwiper,
		shAdv,
		shRichtext,
		shCell,
		shGrid,
		shWallet,
		shOrderCard,
		shHotGoods,

		userinfoCard
	},
	data() {
		return {
			scrollTop: 0,
			showShare: false,
			enable: false, //是否开启吸顶。
			BIGdrderList:[
				{
					src:this.$IMG_URL+'/static/images/BIG-my/waitPay.png',
					title:'待付款',
					type:'nopay'
				},
				{
					src:this.$IMG_URL+'/static/images/BIG-my/waitSend.png',
					title:'待发货',
					type:'nosend'
				},
				{
					src:this.$IMG_URL+'/static/images/BIG-my/waitGet.png',
					title:'待收货',
					type:'noget'
				},
				{
					src:this.$IMG_URL+'/static/images/BIG-my/saleAfter.png',
					title:'退款/售后',
					type:''
				},
				{
					src:this.$IMG_URL+'/static/images/BIG-my/waitTalk.png',
					title:'待评价',
					type:'nocomment'
				},
			]
		};
	},
	computed: {
		...mapGetters(['initShop', 'userTemplate', 'isLogin', 'userInfo', 'authType']),
		userHeadData() {
			if (this.userTemplate?.length) {
				return this.userTemplate[0].content;
			}
		},
		// 是否为大字版
		flag_big(){
			return this.$store.state.user.isBIG
		}
	},
	// 下拉刷新
	onPullDownRefresh() {
		this.init();
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},

	onShow() {
		if (this.isLogin) {
			this.init();
			this.getUserData();
		}
		this.enable = true;
	},

	methods: {
		orderFun(it,index){
			console.log('路由信息',it);
			if(index==3){
				// $Router.jump('/pages/order/after-sale/list')
				this.$Router.push({
					path: '/pages/order/after-sale/list',
					// query: parmas
				});
			} else {
				// $Router.jump('/pages/order/list', { type: it.type })
				this.$Router.push({
					path: '/pages/order/list',
					query:  { type: it.type }
				});
			}
			
			
		},
		...mapActions(['getUserInfo', 'showAuthModal', 'getUserData']),
		onShare() {
			this.showShare = true;
			uni.hideTabBar();
		},
		toHomePhone(){
			if(this.$store.state.user.isLogin){
				uni.navigateTo({
					url:'/pages/app/homeItem'
				})
			}else {
				this.$store.dispatch("showAuthModal", "accountLogin");
			}
			
		},
		toMyTeam(){
			console.log('用户数据',this.$store.state );
			if(this.$store.state.user.isLogin){
				if(this.$store.state.user.userData.is_store!==1&&this.$store.state.user.userData.is_agent!==1){
					uni.showModal({
						content:'您还不是经销商'
					})
				} else {
						uni.navigateTo({
							url:'/pages/app/commission/team'
						})
				}
			} else {
				this.$store.dispatch("showAuthModal", "accountLogin");
			}
		},
		toShenqing(){
			if(this.$store.state.user.isLogin){
				uni.navigateTo({
					url:'/pages/app/commission/apply'
				})
			} else {
				this.$store.dispatch("showAuthModal", "accountLogin");
			}
		},
		toMyPJ(){
			if(this.$store.state.user.isLogin){
				uni.navigateTo({
					url:'/pages/app/myPJ'
				})
			} else {
				this.$store.dispatch("showAuthModal", "accountLogin");
			}
			
		},
		toNews(){
			if(this.$store.state.user.isLogin){
				uni.navigateTo({
					url:'/pages/app/newsPage'
				})
			} else {
				this.$store.dispatch("showAuthModal", "accountLogin");
			}
		},
		toText(){
			if(this.$store.state.user.isLogin){
				uni.navigateTo({
					url:'/pages/app/textPage'
				})
			} else {
				this.$store.dispatch("showAuthModal", "accountLogin");
			}
		},
		// 初始化
		init() {
			this.getUserInfo()
				.then(res => {
					uni.stopPullDownRefresh();
				})
				.catch(e => {
					uni.stopPullDownRefresh();
				});
		},
		toSign(){
			uni.navigateTo({
				url:'/pages/activity/sign/index'
			})
		},
		toYuE(){
			uni.navigateTo({
				url:'/pages/user/wallet/index'
			})
		},
		toPoint(){
			uni.navigateTo({
				url:'/pages/user/wallet/score-balance'
			})
		},
		toYhq(){
			if(this.$store.state.user.isLogin){
				uni.navigateTo({
					url:'/pages/app/coupon/list?st=my'
				})
			} else {
				this.$store.dispatch("showAuthModal", "accountLogin");
			}
			
		},
		toMymessage(){
			if(this.$store.state.user.isLogin){
				uni.navigateTo({
					url:'/pages/app/myMessage'
				})
			} else {
				this.$store.dispatch("showAuthModal", "accountLogin");
			}
		},
		toCenterYHQ(){
			if(this.$store.state.user.isLogin){
				uni.navigateTo({
					url:'/pages/app/coupon/list'
				})
			} else {
				this.$store.dispatch("showAuthModal", "accountLogin");
			}
		},
		myShare(){
			if(this.$store.state.user.isLogin){
				this.onShare()
			} else {
				this.$store.dispatch("showAuthModal", "accountLogin");
			}
		},
		toAddress(){
			uni.navigateTo({
				url:'/pages/user/address/list?rk=user'
			})
		},
		jump(path, query) {
			this.$Router.push({
				path: path,
				query: query
			});
		}
	}
};
</script>

<style lang="scss">
	.pageBgi {
		background: url(https://xiaolao.edeapp.com/imgs/user/myBackImage.png);
	}
	
.card-BIG-box {
	background-color: #fff;
	width: 97%;
	margin: 0 auto;
	border-radius: 15px;
	padding: 23px 18px 0 14px;
	box-sizing: border-box;
	.title-BIG-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 28px;
		.title-BIG {
			font-size: 20px;
			font-weight: bold;
			color: #000;
		}
		.title-BIG-iconBox {
			font-size: 17px;
			font-weight: normal;
			color: #999;
		}
	}
	.cell-item-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #e5e5e5;
		padding-bottom: 21px;
		margin-bottom: 21px;
		&:last-child {
			border: 0;
		}
		.cell-item-row-l {
			padding-left: 11px;
			
			display: flex;
			align-items: center;
			image {
				margin-right: 12px;
				width: 28px;
				height: 25px;
			}
			text {
				font-size: 18px;
					font-weight: normal;
					color: #000;
			}
		}
	}
	.BIG-gnBox {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		.cell-gnBox {
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
			min-width: 30%;
			margin-bottom: 34px;
			image {
				width: 24px;
				height: 24px;
				// width: 100%;
			}
			text {
				display: block;
				width: 100%;
				text-align: center;
				margin-top: 9px;
				font-size: 18px;
				color: #000;
			}
		}
	}
}
	
.copyright-box {
	.copyright-text {
		font-size: 22rpx;
		font-weight: 500;
		color: #c4c4c4;
	}
}
</style>
